<template>
	<div>
	   <div class="noData" v-if="showNoData">
	   	<img src="../../../../static/img/lanhu/noData.png" alt="" />
	   </div>		
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="!showNoData">
	  <van-list
	    v-model="loading"
	    :finished="finished"
	    finished-text="我也是有底线的"
	    @load="onLoad"
	    :immediate-check="false"
	    :style="{minHeight: clientHeight + 'px' }"
	  >
       <div class="wrap" v-for="(item,index) in list" :key="index">
            <div class="a">
            	<div class="a1">
	                <div>
	                	<span class="a2">{{formatDismount(item.goodsNoOnshelf)}}</span>
	                </div>
	                <div class="a3">
	                  <span style="margin-right: 4px;" @click="seeReason(item.goodsNoOnshelf)">下架原因</span>
	                  <span><van-icon name="arrow" class="a_icon"/></span>
	                </div>
                </div>
            </div> 
            <div class="b">
            	<div class="b_wrap">
	            	<div class="imgWrap" :style="{backgroundImage: 'url(' + item.goodsImage + ')'}">
	            		<!--<img :src="item.goodsImage" alt="" class="b_img"/>-->
	            	</div>
	            	<div class="b2">
	            		<div class="b2_1">{{item.comName}}</div>
	            		<div class="b2_2">&yen; {{item.comPrice}}</div>
	            		<div class="b2_3" >
	            			<span>售出: {{item.goodsTotel-item.goodsCount}} </span>
	            			<span style="margin-left: 12px;">总量: {{item.goodsTotel}}</span>
	            			<span style="margin-left: 12px;">剩余: {{item.goodsCount}}</span>
	            			
	            		</div>
	            		<div class="b2_3">
	            			<span>留言:  {{item.discussCount}} </span>
	            			<span style="margin-left: 12px;">浏览:  {{item.visits}} </span>
	            		</div>	            		
	            	</div>	            	
            	</div>
            </div> 
            <div class="c">
            	<div>
            		<div class="btn" @click="again(item.comId)">重新发布</div>
            	</div>
            </div>
       </div>
	  </van-list>
	</van-pull-refresh> 	
	
	
	
	<van-dialog 
		v-model="showDialog" 
		:title="dialogTitle" 
		show-cancel-button 
		cancelButtonText='知道了'
		:showConfirmButton="false">
	   <div slot="default" >
		   	<div style="padding: 15px 0;text-align: center;color: #999;font-size: 13px;">{{dialogMessage1}}</div>
		   	<div style="padding-bottom: 22px;text-align: center;color: #999;font-size: 13px;border-bottom: 1px solid #e5e5e5;">{{dialogMessage2}}</div>
	   </div>
	</van-dialog>		       
	</div>	

</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	  showDialog:false,
       	  dialogTitle:'',
       	  dialogMessage1:'',
       	  dialogMessage2:'',
	      newsList:[
	        {title:"主动下架",news1:'您在集市下架了该宝贝.',news2:'只要"重新发布"它又会元气满满的重新上架'},
	        {title:"已卖出了",news1:'该宝贝已被卖掉.',news2:'只要"重新发布"它又会元气满满的重新上架'},
	        {title:"交易关闭",news1:'该宝贝的订单被关闭了.',news2:'只要"重新发布"它又会元气满满的重新上架'},
	        {title:"含有非法信息",news1:'含有违规文字或者图片.',news2:'请重新发布商品'}	 
	      ],       	  
       	  loading: false,   
	      finished: false,  
	      refreshing: false, // 是否处于下拉刷新状态         
       	  userId:'',
          url1:this.$api+'/marketorderservice/api/v1/market/pageGoodsStateList',       // 获取下架宝贝列表
          pageNum:1,
          pages:0,
          list:[],
          showNoData:false // 是否显示暂无数据          
       }
	},
	methods: {
	   seeReason(type){
		 switch(type) {
		     case 1:
		        this.dialogTitle=this.newsList[0].title
		        this.dialogMessage1=this.newsList[0].news1
		        this.dialogMessage2=this.newsList[0].news2
		        break;
		     case 2:
		        this.dialogTitle=this.newsList[1].title
		        this.dialogMessage1=this.newsList[1].news1
		        this.dialogMessage2=this.newsList[1].news2
		        break;
		     case 3:
		        this.dialogTitle=this.newsList[2].title
		        this.dialogMessage1=this.newsList[2].news1
		        this.dialogMessage2=this.newsList[2].news2
		        break;	
		     case 4:
		        this.dialogTitle=this.newsList[3].title
		        this.dialogMessage1=this.newsList[3].news1
		        this.dialogMessage2=this.newsList[3].news2
		        break;		        
		 } 
	     this.showDialog=true
	   },		
	   formatPrice(num){
	   	  num=num.toFixed(2)
	   	  return num
	   },
	   onRefresh() {
		  setTimeout(() => {
	          this.pageNum=1
	          this.list=[]
	          this.getData()	
	          this.finished = false;
	          this.loading=false
			  this.refreshing = false;
		  }, 1000);          
	   },   
	   onLoad(){	   	 
		 setTimeout(() => {		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	        
	        this.pageNum++
	        if(this.pageNum>this.pages){this.finished = true;}
	        else{
              this.getData()
	          this.loading = false;	        	
	        }
	      }, 1000);   	
	   },		
       again(comId){
       	 let arg='[{"comId":"'+comId+'"},{"backType":"3"}]' 
       	 this.link('/market/goods/releaseAgain',arg)
       },
       getData(){
       	    let that=this
		    this.$Axios.postRequest(this.url1,{userId:this.userId,goodsState:'3'},{pageNum:this.pageNum,pageSize:'3'})
		    .then(function(res) {
			  	if(res.data.page.total==0){
			  		that.showNoData=true
			  	}
		    	that.pages=res.data.page.pages
                that.list=that.list.concat(res.data.page.records)
		    })       	
       }
	},
	mixins:[publicFun],	
	mounted() {
	    this.userId=this.$router.currentRoute.query.userId;
		this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
.a{border-bottom: 1px solid #f6f6f6;font-size: 16px;}
.a1{display: flex;justify-content: space-between;padding: 15px;}
.a_icon{vertical-align: -2px;}
.a2{color: #a2a2a2;font-size: 12px;}
.a3{color:#47aff8;font-weight: bold;font-size: 12px;}
.imgWrap{width: 92px;height: 92px;overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;border-radius: 4px;}

.b{padding: 20px 15px 0;display: flex;}
.b_wrap{display: flex;border-bottom:1px solid #f6f6f6;padding-bottom: 15px;width: 100%;}
.b_img{width: 80px;height: 80px;display: block;border-radius: 6px;}
.b2{margin-left: 10px;position: relative;flex: 1;}
.b2_1{font-weight: bold;font-size: 14px;display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.b2_2{color: $common-font2;font-size: 14px;margin: 10px 0;}
.b2_3{color: #a2a2a2;margin-bottom: 10px;}

.dialogMessage{padding: 25px 15px;color: #666;font-size: 14px;}
.c{padding: 10px 15px;display: flex;justify-content: flex-end;align-items: center;}
.btn{padding: 4px 12px;border:1px solid $bc1;margin-right: 9px;font-size: 13px;}
</style>